// 公共文章标题列表组件
//  分别有三种样式，图片数量为 0 1 3
//  使用v-if更具图片样式来显示不同的样式
<template>
<!-- 因为后端的原因，很多图片无法查看，所以固定一个文章id闯过去   article.art_id-->
  <van-cell class="article-item-container" to="/article/7817">
    <!-- 顶部左侧标题信息栏插槽 -->
    <template #title>
        <div class="title van-multi-ellipsis--l2" >
            {{article.title}}
        </div>
    </template>

    <template #label>
         <!-- 标题下方图片展示，只有在图片数量为3 时显示 -->
        <div  class="cover-wrap"  v-if="article.cover.type === 3">
            <div v-for="(img, index) in article.cover.images" :key="index" class="cover-item">
                <van-image
                    fit="cover"
                    :src="img"
                    class="right-color"
                />
            </div>
        </div>
        <div class="label-info-wrap">
            <span class="text">{{article.aut_name}}</span>
            <span class="text">{{article.comm_count}} 评论</span>
            <span class="text">{{article.pubdate | relativeTime}}</span>
        </div>
    </template>
    <template #default v-if="article.cover.type === 1">
         <div  class="right-img">
                <van-image
                    fit="cover"
                    :src="article.cover.images[0]"
                    />
        </div>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    article: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.article-item-container {
    .van-cell__value {
        flex: unset;
        width: 232px;
        height: 146px;
        .right-img {
          padding-left: 25px;
          width: 232px;
          height: 146px;
          .van-image {
              width: 100%;
              height: 146px;
          }
      }
    }
    .label-info-wrap {
      .text {
        margin-right: 20px;
      }
    }
    /* 多图展示样式 */
  .cover-wrap {
    display: flex;
    padding: 30px 0;

    .cover-item {
      /* 每张图均分宽度 */
      flex: 1;
      height: 146px;
      .right-color {
        width: 100%;
        height: 146px;
      }
      // :deep(.van-image__img) {
      //   width: 100%;
      //   height: 146px;
      // }
      &:not(:last-child) {
        padding-right: 4px;
      }
    }
  }

}
</style>
